<template>
	<view>
		<view class="title">癌症风险评估</view>
		<view class="content">
			癌症是严重威胁人们健康的疾病。但是大部分的癌症是可防可治的。让我们来做个评估，看看自己有哪些因素会升高常见癌症风险，应该如何做来降低风险？又该做哪些检查来及时把癌症扼杀在摇篮里？
		</view>
		<view class="content">
			本次评估不记名，不存储，请放心填写！为了反映真实风险，请按照您的实际情况填写！
		</view>
		<view class="content">
			请先填写以下个人信息：
		</view>

		<view class="item">
			<view class="uni-form-item">
				<view class="">您的年龄</view>
				<input class="uni-input" name="input" type="number" maxlength="3" placeholder="请输入年龄" v-model="age" />
			</view>
			<view class="blank"></view>
			<view class="uni-form-item">
				<view class="">您的性别</view>
				<radio-group class="c-flex" @change="radioChange1">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in genderList" :key="item.value">
						<radio :value="item.value" :checked="index === current" />
						<text>{{item.title}}</text>
					</label>
				</radio-group>
			</view>
			<view class="blank"></view>
		</view>

		<view class="normal-btn" @click="toDetail">开始评估</view>
		<view class="blank"></view>
		<view class="blank"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				genderList: [{
					title: '男',
					value: 1
				}, {
					title: '女',
					value: 2
				}],
				age: '',
				gender: '',
			}
		},
		methods: {
			radioChange1(e) {
				console.log(e.detail.value);
				this.gender = e.detail.value
			},
			toDetail() {
				if (!this.age || Number(this.age) > 150) {
					uni.showToast({
						title: `年龄输入有误`,
						icon: "none"
					})
					return
				}
				
				if(!this.gender){
					uni.showToast({
						title: `请选择性别`,
						icon: "none"
					})
					return
				}
				

				uni.navigateTo({
					url: '/pages/wenjuan'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding: 15px;
	}

	.content {
		padding: 15px;
		font-size: 16px;
		line-height: 25px;
	}

	.item {
		.uni-form-item {
			padding: 10px;
			border-radius: 10px;
			background-color: #ffffff;

			/deep/ .uni-input {
				margin-top: 10px;
				background-color: #f2f2f2;
				padding: 10px;
			}
		}

		.c-flex {
			display: flex;
			align-items: center;

			& text {
				padding: 0 25px 0 5px;
			}
		}
	}
</style>